import React from 'react';
import {Card, Button, Tabs, message, Icon, Tag, Table, Row, Col, Tree} from 'antd';
import RcTweenOneTag from './components/rc-tween-one-tag'
import reqwest from 'reqwest';
import ControlledOperationExample from './components/controlled-operation-example';
import BasicTree from './components/basic-tree';
import DragExample from './components/drag-example';
import BuiltDirectoryTree from './components/built-directory-tree';
import TreesWithConnections from './components/trees-with-connections';
import CustomIconTree from './components/custom-icon-tree';
import SearchableTrees from './components/searchable-trees';


const {TreeNode} = Tree;

export default class CustomTree extends React.Component {
  state = {
    data: [],
    pagination: {},
    loading: false
  };


  render() {
    return (
      <>
        <Row gutter={16}>
          <Col span={8}>
            <Card title="最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。" className="card-wrap">
              <BasicTree/>
            </Card>

            <Card title="可以针对不同的节点定制图标" className="card-wrap">
              {CustomIconTree}
            </Card>

            <Card title="带连接线的树" className="card-wrap">
              <TreesWithConnections/>
            </Card>

            <Card title="目录" className="card-wrap">
              <BuiltDirectoryTree/>
            </Card>

          </Col>

          <Col span={8}>
            <Card title="受控操作示例" className="card-wrap">
              <ControlledOperationExample/>
            </Card>

            <Card title="可搜索的树" className="card-wrap">
              <SearchableTrees/>
            </Card>

          </Col>

          <Col span={8}>
            <Card title="拖动示例" className="card-wrap">
              <DragExample/>
            </Card>


          </Col>


        </Row>
      </>
    );
  }
}


// API#
// Tree props#
// 参数	                          说明	类型	默认值	版本
// autoExpandParent	              是否自动展开父节点	boolean	true
// blockNode	                    是否节点占据一行	boolean	false	3.15.0
// checkable	                    节点前添加 Checkbox 复选框	boolean	false
// checkedKeys	                 （受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点 key，则子节点自动选中；相应当子节点 key 都传入，父节点也自动选中。当设置checkable和checkStrictly，它是一个有checked和halfChecked属性的对象，并且父子节点的选中与否不再关联	string[] | {checked: string[], halfChecked: string[]}	[]
// checkStrictly	                checkable 状态下节点选择完全受控（父子节点选中状态不再关联）	boolean	false
// defaultCheckedKeys	            默认选中复选框的树节点	string[]	[]
// defaultExpandAll	              默认展开所有树节点	boolean	false
// defaultExpandedKeys	          默认展开指定的树节点	string[]	[]
// defaultExpandParent	          默认展开父节点	bool	true	3.4.0
// defaultSelectedKeys	          默认选中的树节点	string[]	[]
// disabled	                      将树禁用	bool	false	3.4.0
// draggable	                    设置节点可拖拽（IE>8）	boolean	false
// expandedKeys	                 （受控）展开指定的树节点	string[]	[]
// filterTreeNode	                按需筛选树节点（高亮），返回 true	function(node)	-
// loadData	                      异步加载数据	function(node)	-
// loadedKeys	                   （受控）已经加载的节点，需要配合 loadData 使用	string[]	[]	3.7.0
// multiple	                      支持点选多个节点（节点本身）	boolean	false
// selectedKeys	                 （受控）设置选中的树节点	string[]	-
// showIcon	                      是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式	boolean	false
// switcherIcon	                  自定义树节点的展开/折叠图标	React.ReactElement	-	3.12.0
// showLine	                      是否展示连接线	boolean	false
// onCheck	                      点击复选框触发	function(checkedKeys, e:{checked: bool, checkedNodes, node, event})	-
// onDragEnd	                    dragend 触发时调用	function({event, node})	-
// onDragEnter	                  dragenter 触发时调用	function({event, node, expandedKeys})	-
// onDragLeave	                  dragleave 触发时调用	function({event, node})	-
// onDragOver	                    dragover 触发时调用	function({event, node})	-
// onDragStart	                  开始拖拽时调用	function({event, node})	-
// onDrop	drop                    触发时调用	function({event, node, dragNode, dragNodesKeys})	-
// onExpand	                      展开/收起节点时触发	function(expandedKeys, {expanded: bool, node})	-
// onLoad	                        节点加载完毕时触发	function(loadedKeys, {event, node})	-	3.7.0
// onRightClick	                  响应右键点击	function({event, node})	-
// onSelect	                      点击树节点触发	function(selectedKeys, e:{selected: bool, selectedNodes, node, event})	-
// treeData	                      treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一）	array\<{key, title, children, [disabled, selectable]}>	-	3.19.8


// TreeNode props#
// 参数	                           说明	类型	默认值	版本
// checkable	                    当树为 checkable 时，设置独立节点是否展示 Checkbox	boolean	-	3.17.0
// disableCheckbox	              禁掉 checkbox	boolean	false
// disabled	                      禁掉响应	boolean	false
// icon	                          自定义图标。可接收组件，props 为当前节点 props	ReactNode/Function(props):ReactNode	-	3.4.0
// isLeaf	                        设置为叶子节点(设置了loadData时有效)	boolean	false
// key	                          被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！	string	内部计算出的节点位置
// selectable	                    设置节点是否可被选中	boolean	true
// title	                        标题	string|ReactNode	'---'
// DirectoryTree                  props#


// 参数	                          说明	类型	默认值	版本
// expandAction	                  目录展开逻辑，可选 false 'click' 'doubleClick'	string	click	3.7.0
